<template>
	<view class="order-item">
		<view class="order-item-top">
			<text class="order-item-top-title">日常保洁</text>
			<text v-if="item.orderStatus == OrderStatus.STATUS_PAY" class="order-item-top-status-1">待付款</text>
			<text v-else-if="item.orderStatus == OrderStatus.STATUS_START" class="order-item-top-status-2">待开始</text>
			<text v-else-if="item.orderStatus == OrderStatus.STATUS_CONFIRM" class="order-item-top-status-3">待确认</text>
			<text v-else-if="item.orderStatus == OrderStatus.STATUS_COMMENT" class="order-item-top-status-4">待评价</text>
		</view>
		<view class="order-item-content">
			<image class="order-item-content-img"
				src="https://oss.jianyejia.cn/pics/2023/05/12/d89198f3d08045498d57e1466e6feaed.jpg" />
			<view class="order-item-content-right">
				<view class="order-item-content-row">
					<text class="order-item-content-right-order-no">订单编号：123457890234567</text>
					<text class="order-item-content-right-price">{{ (item.price / 100).toFixed(2) }}</text>
				</view>
				<view class="order-item-content-row">
					<text>已选：洗衣机清洗x1台</text>
					<text class="order-item-content-right-count">{{ item.count }}</text>
				</view>
				<view class="order-item-content-row">
					<text>预约：2023-12-01(周五) 8:30-11:30</text>
				</view>
			</view>
		</view>
		<view class="order-item-total">
			<text class="order-item-total-time">12-12 17:35</text>
			<view>
				<text class="order-item-total-count">共{{ item.count }}个服务</text>
				<text class="order-item-total-amount">合计￥{{ totalAmount() }}</text>
			</view>
		</view>
		<view v-if="item.orderStatus != OrderStatus.STATUS_START" class="order-item-bottom">
			<view v-if="item.orderStatus == OrderStatus.STATUS_PAY" class="order-item-bottom-cancel"
				@click.stop="onCancelOrder(item)">取消订单</view>
			<view v-if="item.orderStatus == OrderStatus.STATUS_PAY" class="order-item-bottom-confirm"
				@click.stop="onPayOrder(item)">付款</view>
			<view v-if="item.orderStatus == OrderStatus.STATUS_CONFIRM" class="order-item-bottom-confirm"
				@click.stop="onConfirmOrder(item)">确认</view>
			<view v-if="item.orderStatus == OrderStatus.STATUS_COMMENT" class="order-item-bottom-confirm"
				@click.stop="onEvaluate(item)">去评价</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	const props = defineProps({
		item: {
			type: Object,
			default: {},
		}
	})
	enum OrderStatus {
		STATUS_PAY = 1,
		STATUS_START = 2,
		STATUS_CONFIRM = 3,
		STATUS_COMMENT = 4,
	}
	const totalAmount = () : string => {
		return ((props.item.price, props.item.count) / 100).toFixed(2)
	}

	const onCancelOrder = (item : any) => {
		uni.showModal({
			title: "提示",
			content: "且行且珍惜,真的要取消订单吗",
			confirmText: "取消订单",
			confirmColor: "#FF6633",
			cancelText: "我再想想",
			cancelColor: "#515253",
			success: (res) => {
				console.log('弹窗确认', res, item);
				if (res.confirm) {
					//TODO 取消订单
				}
			}
		})
	}
	const onPayOrder = (item : any) => {
		console.log('onPayOrder', item);
		uni.navigateTo({
			url: '/order/pages/order/detail/order-detail'
		})
	}
	const onConfirmOrder = (item : any) => {
		console.log('onConfirmOrder', item);
	}
	const onEvaluate = (item : any) => {
		console.log('onEvaluate', item);
	}
</script>
<style lang="scss" scoped>
	.order-item {
		border-radius: 6px;
		background-color: #FEFFFF;
		padding: 10px;
		margin: 10px 10px 0px 10px;

		&-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 23px;

			&-title {
				font-size: 16px;
				color: #000000;
				font-weight: 600;
			}

			&-status-1 {
				font-size: 13px;
				color: #FC7212;
			}

			&-status-2 {
				font-size: 13px;
				color: #00B294;
			}

			&-status-3 {
				font-size: 13px;
				color: var(--primary-color);
			}

			&-status-4 {
				font-size: 13px;
				color: var(--color-normal);
			}
		}

		&-content {
			margin-top: 12px;
			display: flex;
			flex-direction: row;

			&-img {
				width: 68px;
				height: 68px;
				border-radius: 6px;
			}

			&-right {
				flex: 1;
				margin-left: 10px;
				color: var(--color-gray);
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 13px;

				&-order-no {
					width: 168px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				&-price {
					color: #000000;
					font-size: 16px;
					font-weight: 600;

					&::before {
						content: "￥";
						font-size: 12px;
					}
				}

				&-count {
					font-size: 13px;

					&::before {
						content: "x";
						font-size: 12px;
					}
				}
			}

			&-row {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
			}
		}

		&-total {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			margin-top: 8px;

			&-time {
				white-space: nowrap;
				font-size: 13px;
				color: #000000;
			}

			&-count {
				color: var(--color-gray);
				font-size: 13px;
				margin-right: 8px;
			}

			&-amount {
				color: #000000;
				font-size: 14px;
				font-weight: 600;
			}
		}

		&-bottom {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
			margin-top: 12px;

			&-cancel {
				color: #000000;
				border: 1px solid #E6E6E8;
				background-color: white;
				text-align: center;
				font-size: 13px;
				width: 78px;
				height: 32px;
				line-height: 32px;
				border-radius: 16px;
			}

			&-confirm {
				margin-left: 6px;
				background-color: var(--primary-color);
				color: white;
				text-align: center;
				font-size: 13px;
				width: 78px;
				height: 32px;
				line-height: 32px;
				border-radius: 16px;
			}

		}


	}
</style>